<template>
  <div class="container mt-8 mb-3">
    <el-card>
      <div>
        <el-button size="mini" class="action" icon="el-icon-refresh" @click="getOrderList"></el-button>
      </div>
      <div class="tab-box">
        <el-tabs v-model="filters.orderStatus" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="(s, index) in orderStatus"
            :key="index"
            :label="s.label"
            :name="s.value"
          ></el-tab-pane>
        </el-tabs>
        
      </div>
      <m-table
        row-key="reportId"
        v-model="tableData"
        :config="tableConfig"
        :loading="pending"
        empty-text=""
        hide-page
      >
        <template #orderStatus="{ row }">
          {{ orderStatusName.get(row.orderStatus) }}
        </template>
        <template #action="{ row }">
          <m-button
            v-if="sepcOrderStatus.includes(row.orderStatus)"
            class="blue"
            type="text"
            @click="saveOrderRepay(row)"
            >Pagar ahora</m-button
          >
        </template>
      </m-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pending: true,
      sepcOrderStatus: [60, 61], // 60,61 首页
      orderStatus: [
        { label: "Todos los pedidos", value: "0" },
        { label: "Pendiente de pago", value: "1" },
        { label: "Pagado", value: "2" },
        { label: "Atrasado", value: "3" },
      ],
      orderStatusName: new Map([
        [10, 'Datos pendientes de captura'],
        [20, 'Segunda recomendación exitosa'],
        [30, 'En revisión'],
        [31, 'Revisión rechazada'],
        [36, 'Pendiente de modificar tarjeta bancaria'],
        [50, 'Desembolsando'],
        [60, 'Pendiente de reembolso'],
        [61, 'Vencido'],
        [70, 'Liquidado'],
        [71, 'Liquidación vencida'],
        [99, 'Cancelado'],
      ]),
      filters: {
        orderStatus: "0",
      },
      tableData: [],
      tableConfig: [
        {
          label: "Número de pedido",
          prop: "orderId",
          width: '200px'
        },
        {
          label: "Estado del pedido",
          slot: "orderStatus",
          width: '200px'
        },
        {
          label: " Monto solicitado", // 申请金额
          prop: "loanAmount",
          width: '132px'
        },
        {
          label: "Plazo (días)", // 申请期限
          prop: "term",
          width: '70px',
        },
        {
          label: "Tarifa de servicio", // 服务费
          prop: "feeAmount",
        },
        {
          label: "Monto recibido", // 到账金额
          prop: "receivedAmount",
          width: '122px',
        },
        {
          label: "Interés", // 利息
          prop: "rateAmount",
        },
        {
          label: "Días de retraso", // 逾期天数
          prop: "overdueDay",
          width: '122px',
        },
        {
          label: "Interés por mora", // 罚息
          prop: "fineAmount",
          width: '132px',
        },
        {
          label: "Monto a pagar", // 应还金额
          prop: "realRepaymentAmount",
          width: '130px'
        },
        {
          label: "Fecha de solicitud",
          prop: "applyDate",
          width: '140px',
        },
        {
          label: "Fecha de revisión",
          prop: "auditTime",
          width: '140px',
        },
        {
          label: "Fecha de desembolso",
          prop: "loanDate",
          width: '166px',
        },
        {
          label: "Fecha de vencimiento",
          prop: "dueDate",
          width: '166px',
        },
        {
          label: "Fecha de pago",
          prop: "repayDate",
          width: '130px',
        },
        {
          label: "Acción",
          slot: "action",
          fixed: 'right',
          width: '100px'
        },
      ],
    };
  },
  methods: {
    handleTabClick() {
      this.getOrderList()
    },
    getOrderList() {
      this.pending = true
      this.$http.post(this.$api.getOrderList, this.filters).then((res) => {
        if (res.resultCode == 200) {
          this.tableData = res.data || [];
        }
        this.pending = false
      }).catch(() => {
        this.pending = false
      });
    },
    saveOrderRepay({ orderId }) {
      this.$http.post(this.$api.saveOrderRepay, {
        orderId,
        periodNoList: [1]
      }).then(res => {
        if (res.resultCode == 200) {
          this.$util.openIframe(res.data.connect)
        }
      })
    },
  },
  created() {
    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 360px);
}
.tab-box {
  position: relative;
  .action {
    position: absolute;
    right: 0;
    top: -2px
  }
}
</style>